<template>
  <view
    class="tui-list-view tui-view-class"
    :style="{ backgroundColor: backgroundColor, marginTop: marginTop }"
  >
    <view
      v-if="title"
      class="tui-list-title"
      :style="{ color: color, fontSize: size + 'rpx', lineHeight: 30 + 'rpx' }"
      >{{ title }}</view
    >
    <view class="tui-list-content" :class="[unlined ? 'tui-border-' + unlined : '']">
      <slot />
    </view>
  </view>
</template>

<script>
  export default {
    name: 'TuiListView',
    props: {
      title: {
        type: String,
        default: '',
      },
      color: {
        type: String,
        default: '#666',
      },
      // rpx
      size: {
        type: Number,
        default: 30,
      },
      backgroundColor: {
        type: String,
        default: 'transparent',
      },
      unlined: {
        type: String,
        default: '', // top,bottom,all
      },
      marginTop: {
        type: String,
        default: '0',
      },
    },
  };
</script>

<style scoped>
  .tui-list-title {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .tui-list-content {
    width: 100%;
    position: relative;
  }

  .tui-list-content::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top: 1px solid #eaeef1;
    -webkit-transform: scaleY(0.5) translateZ(0);
    transform: scaleY(0.5) translateZ(0);
    transform-origin: 0 0;
    z-index: 2;
    pointer-events: none;
  }

  .tui-list-content::after {
    content: '';
    width: 100%;
    position: absolute;
    border-bottom: 1px solid #eaeef1;
    -webkit-transform: scaleY(0.5) translateZ(0);
    transform: scaleY(0.5) translateZ(0);
    transform-origin: 0 100%;
    bottom: 0;
    right: 0;
    left: 0;
  }

  .tui-border-top::before {
    border-top: 0;
  }

  .tui-border-bottom::after {
    border-bottom: 0;
  }

  .tui-border-all::after {
    border-bottom: 0;
  }

  .tui-border-all::before {
    border-top: 0;
  }
</style>
